<template>
  <div class="select-drop-down">
    <el-select ref="select" v-model="selectValue.busUserId" :style="{ width: widths }" @visible-change="visibleChange"
               clearable @clear="handleClear"
    >
      <div style="padding: 0 5px ">
        <!--   搜索框   -->
        <div class="select-drop-down__hedder">
          <el-input v-model="searchValue" placeholder="请输入搜索内容" prefix-icon="el-icon-search"
                    @input="handleInput" clearable size="mini"
          />
          <div class="select-drop-down__options" v-if="workOrderPersonType === '1'">
            <div class="select-drop-down__options__item" :class="{'active': item.id === currentValue}"
                 v-for="item in options" :key="item.id" @click="typeSelect(item.id)"
            >{{ item.name }}
            </div>
          </div>
        </div>

        <el-option key="id" hidden :value="selectValue.busUserId" :label="selectValue.workOrderPersonName"></el-option>
        <!--  选项列表  -->
        <div class="select-drop-down__list">
          <div class="select-drop-down__list__item" v-for="item in list" :key="item.busUserId"
               @click.stop="handleSelect(item.busUserId)" :style="{ background: isActive(item) ? '#f5f7fa' : '#fff' }"
          >
            <div class="leftText">
              <div class="leftText__text">
                <div class="text1">{{ item.workOrderPersonName }}</div>
                <div class="text2">电话：{{ item.workOrderPersonPhone }}</div>
                <div class="text2">{{ item.tenantName }}</div>
              </div>
              <div class="leftText__count">
                <div class="text1">待处理工作</div>

                <el-popover placement="top" title="处理工作" width="500" trigger="click"
                            :ref="'popover-'+item.busUserId"
                            popper-class="more-content"
                >
                  <div class="more-content" v-if="workOrderPersonType === '1'||workOrderPersonType === '2'">
                    <div class="more-content__item" v-for="(ii, index) in countList" :key="index">
                      <div class="more-content__item__num">{{ index + 1 }}</div>
                      <div class="more-content__item__content">
                        <div class="more-content__item__content__title">
                          <div>{{ itemNames(ii.workOrderChargeItemList) }}</div>
                          <div style="color: #999">{{ ii.appointmentTime }}</div>
                        </div>
                        <div class="more-content__item__content__text">{{ ii.premisesAddress }}</div>
                      </div>
                    </div>
                    <div class="more-content__item" v-if="countList.length === 0">
                      <div class="more-content__item__content">
                        <div>暂无数据</div>
                      </div>
                    </div>
                  </div>
                  <div class="more-content" v-if="workOrderPersonType === '3'">
                    <div class="more-content__item" v-for="(ii, index) in countList" :key="index">
                      <div class="more-content__item__num">{{ index + 1 }}</div>
                      <div class="more-content__item__content">
                        <div class="more-content__item__content__title">
                          <div>预约看房</div>
                          <div style="color: #999">{{ ii.appointmentTime }}</div>
                        </div>
                        <div class="more-content__item__content__text">{{ ii.premisesAddress }}</div>
                      </div>
                    </div>
                    <div class="more-content__item" v-if="countList.length === 0">
                      <div class="more-content__item__content">
                        <div>暂无数据</div>
                      </div>
                    </div>
                  </div>
                  <span slot="reference" class="count__text" @click.stop="handleShowTips(item)"></span>
                </el-popover>
                <span class="count__text" @click.stop="handleShowTips(item)">{{ item.orderCount }}</span>
              </div>
            </div>
            <div class="rightText">
              <i v-if="isActive(item)" class="icon el-icon-success"></i>
            </div>

          </div>
          <div class="select-drop-down__result" v-if="!list.length &&!loading && searchResult"
               style="text-align: center;padding: 10px"
          >
            <div class="result__text">暂无数据</div>
          </div>
          <div class="select-drop-down__result" v-if="loading" style="text-align: center;padding: 10px">
            <div class="result__text">加载中...</div>
          </div>
        </div>
      </div>

    </el-select>
  </div>
</template>
<script>
import { debounce } from '@/utils'
import { listAllWorkOrderPerson, listWorkOrder } from '@/api/houseManagement/workOrderPerson'

export default {
  name: 'SelectDropDown',
  props: {
    value: {
      default: ''
    },
    workOrderPersonType: {
      type: String,
      default: '1'
    },
    placeholder: {
      type: String,
      default: 'Select'
    },
    widths: {
      type: String,
      default: () => null
    }
  },
  data() {
    return {
      // 选项列表
      options: [
        {
          id: '1',
          name: '内部维修人员'
        }
        // {
        //   id: '2',
        //   name: '外部维修人员'
        // }
      ],
      // 当前选项
      currentValue: '1',
      selectValue: {},
      // 查询参数
      queryParam: {
        keyword: ''
      },
      // 搜索关键字
      searchValue: '',
      // 加载中
      loading: false,
      // 列表数据
      list: [],
      visible: false,
      // 定时器
      timer: null,
      // 搜索结果
      searchResult: false,
      // 待处理工作数量
      countList: [],
      workOrderDialogVisible: false
    }
  },
  computed: {
    //维修项目名
    itemNames() {
      return (value) => {
        let list = value ? value.map(item => item.itemName) : []
        return list.join(' | ')
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        console.log('val', val)
        if (val) {
          this.$nextTick(() => {
            this.selectValue = this.list.find(item => item.busUserId === val) ? this.list.find(item => item.busUserId === val) : {}
            console.log('selectValue', this.selectValue)
          })
        }else{
          console.log('val:null', val)
          this.selectValue = {}
        }


      },
      immediate: true
    }
  },
  methods: {
    init() {
      this.getList()
    },
    getList() {
      this.loading = true
      this.searchResult = false
      console.log('queryParam', this.queryParam)
      let params = {
        workOrderPersonName: this.queryParam.keyword,
        workOrderPersonType: this.workOrderPersonType,
        desensitizeType: '0'
      }
      listAllWorkOrderPerson(params).then(res => {
        this.list = res.data
        this.loading = false
        this.searchResult = true

        this.selectValue = this.list.find(item => item.busUserId === this.value) ? this.list.find(item => item.busUserId === this.value) : {}
      })
    },
    // 判断当前选项是否为选中状态
    isActive(item) {
      return item.busUserId === this.selectValue.busUserId
    },
    // 搜索
    handleSearch() {
      this.list = []
      this.init()

    },
    // 搜索框输入
    handleInput: debounce(function(val) {
      console.log('handleInput', val)
      this.queryParam.keyword = val
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.handleSearch()
      }, 300)
    }, 300, true),

    // 类型选择
    typeSelect(id) {
      this.currentValue = id
    },
    // 列表选项选择
    handleSelect(id) {
      this.selectValue = this.list.find(item => item.busUserId === id)
      console.log('selectValue', this.selectValue)
      this.$emit('input', id)
      this.$emit('change', this.selectValue)
      this.$refs.select.blur()
    },
    // 选项列表显示隐藏
    visibleChange(e) {
      if (!e) {
        this.searchValue = ''
        this.queryParam.keyword = ''
      } else {
        this.init()
      }
    },
    // 清除选项
    handleClear() {
      this.selectValue = {}
      this.$emit('input', '')
    },
    // 显示待处理工作数量
    async handleShowTips(item) {
      console.log('item', item)
      console.log(this.$refs[`popover-${item.busUserId}`])
      // 获取待完成工单信息
      const res = await listWorkOrder(item.workOrderPersonId)
      this.countList = res.data
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].busUserId !== item.busUserId) {
          // this.$refs[`popover-${this.list[i].id}`][0].doClose()
          this.$refs[`popover-${this.list[i].busUserId}`][0].showPopper = false
        }
      }
      // this.$refs[`popover-${item.id}`][0].$el.querySelector('.count__text').click()
      // this.$refs[`popover-${item.id}`][0].showPopper = true
      this.$refs[`popover-${item.busUserId}`][0].showPopper = !this.$refs[`popover-${item.busUserId}`][0].showPopper
    },
    // 显示待处理工作数量
    handleShowWorkOrder(item) {
      listWorkOrder(item.busUserId).then(res => {
        this.countList = res.data
        this.workOrderDialogVisible = true
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-scrollbar__wrap {
  background: red !important;
}

::v-deep .el-scrollbar {
  height: 9000px !important;
}

.select-drop-down__hedder {
  position: sticky;
  top: 6px;
  background-color: #fff;
  z-index: 999;
}

.select-drop-down__options {
  display: flex;
  padding: 5px 0;

  .select-drop-down__options__item {
    text-align: center;
    color: #C2C6CE;
    font-size: 12px;
    flex: 1;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #DFE4ED;
    margin-right: 2px;

    &:hover {
      background-color: #F5F7FA;
    }

    &.active {
      border: 1px solid #2196F3;
      color: #2196F3;

      &:hover {
        cursor: default;
        background-color: #fff;
      }
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

.select-drop-down__list {
  .select-drop-down__list__item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #DFE4ED;
    cursor: pointer;

    &:hover {
      background-color: #F5F7FA !important;
    }

    .leftText {
      display: flex;
      flex: 1;

      .leftText__text, .leftText__count {
        flex: 1;

        .text1 {
          color: #333;
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .text2 {
          color: #999;
          font-size: 12px;
          margin-bottom: 5px;
        }
      }

      .leftText__count {
        text-align: center;

        .count__text {
          color: #19AFF1;
          text-align: center;
          cursor: pointer;
          width: 60px;
          display: block;
          position: relative;
          left: 50%;
          transform: translateX(-50%);
        }
      }


    }

    .rightText {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #F5F7FA;
      cursor: pointer;
      color: #C2C6CE;
      font-size: 14px;
      margin-left: 10px;

      i {
        color: #0caaf0;
        font-size: 28px;
      }
    }

  }

  .select-drop-down__result {
    .result__text {
      color: #999;
      font-size: 14px;
      text-align: center;
      margin-top: 10px;
    }
  }
}

.more-content {
  .more-content__item {
    padding: 10px;
    border-bottom: 1px solid #DFE4ED;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    &:last-child {
      border-bottom: none;
    }

    .more-content__item__num {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #F5F7FA;
      color: #C2C6CE;
      font-size: 16px;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .more-content__item__content {
      flex: 1;
      display: flex;
      flex-direction: column;

      .more-content__item__content__title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .more-content__item__content__text {

      }
    }
  }
}
</style>
